<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/YearTrends/yearTrends" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="yearTrends" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />
            %{--<label>产品编码：</label>&nbsp;
            <input type="text" name="partName"  value="${partName}"/>
            <label>产品名称：</label>&nbsp;
            <input type="text" name="partDesc" value="${partDesc}"/>
            <label>产品图号：</label>&nbsp;
            <input type="text" name="group3" value="${group3}"/>
            <label>工序编码：</label>&nbsp;
            <input type="text" name="stepName" value="${stepName}"/>
            <label>工序名称：</label>&nbsp;
            <input type="text" name="stepDesc" value="${stepDesc}"/><br/>
            <label>大组类：</label>&nbsp;
            <input type="text" name="totalGroup" value="${totalGroup}"/>
            <label>小分类：</label>&nbsp;
            <input type="text" name="detailCate" value="${detailCate}"/>
            <label>批次号：</label>&nbsp;
            <input type="text" name="lotId" value="${lotId}"/>--}%
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue" onclick="javascript:bjuiExportExl('#pagerForm','${request.getContextPath()}/YearTrends/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <g:if test="${yearTrends.size() > 0}">
        <div id="yearTrends" style="width:100%;height:58%;" ></div>
        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);
            var data=[];
            var option = {
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            excludeComponents: ['toolbox'],
                            pixelRatio: 2
                        }
                    }
                },
                title: {
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['实际合格率']
                },
                xAxis: {
                    data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                },
                yAxis : [
                    /* {
                     type : 'value'
                     },*/
                    {
                        type : 'value',
                        name:'实际合格率',

                        axislabel: {
                            formatter: '{value}%'
                        },
                        show:true
                    }
                ],
                series : [
                    {
                        name: '实际合格率',
                        type: 'line',
                        data:[${yearTrends[0].January},${yearTrends[0].February},${yearTrends[0].MARCH},${yearTrends[0].APRIL},${yearTrends[0].MAY},${yearTrends[0].JUNE}
                            ,${yearTrends[0].JULY},${yearTrends[0].AUGUST},${yearTrends[0].SEPTEMBER},${yearTrends[0].OCTOBER},${yearTrends[0].NOVEMBER},${yearTrends[0].DECEMBER}]
                    }
                ]
            };
            eChartsTool.setOption("roma", document.getElementById('yearTrends'), option);
        </script>
        <div>
            <table  data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr id="t1">
                    <g:each in="${tableHeadList}" status="j" var="headInstance">
                        <g:if test="${headInstance!='RN'}">
                            <th><g:message code="${headInstance}" default="${headInstance}"/></th>
                        </g:if>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <g:if test="${yearTrends.size()>0}">
                    <g:each in="${yearTrends}" status="i" var="dataInstance">
                        <tr>
                            <g:each in="${tableHeadList}" status="j" var="headInstance">
                                <g:if test="${headInstance!='RN'}">
                                    <td>${dataInstance["${headInstance}"]}</td>
                                </g:if>
                            </g:each>
                        </tr>
                    </g:each>
                </g:if>
                </tbody>
            </table>
        </div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel" />
    </g:else>
</div>